<template>
  <div>
    <div style="margin-bottom: 10px">
      <a-row style='margin-top: 10px'>
        <a-col :span='8'>
          <div style='display: inline-block;width: 45px;'>产品：</div>
          <div style='display: inline-block;width: 70%'>
            <a-input v-model='queryVarietyParams.variety' placeholder='请输入产品名称' allow-clear @change="searchFlowerVarietys"/>
          </div>
        </a-col>
        <a-col :span='8'>
          <div style='display: inline-block;width: 80px;'>商品编码：</div>
          <div style='display: inline-block;width: 70%'>
            <a-input v-model='queryVarietyParams.varietyCode' placeholder='请输入商品编码' allow-clear @change="searchFlowerVarietys"/>
          </div>
        </a-col>
        <a-col :span='4'>
          <a-button type="primary" icon="search" @click="searchFlowerVarietys">
            查询
          </a-button>
        </a-col>
        <a-col :span='4'>

        </a-col>
      </a-row>
    </div>
    <a-table :columns='selectVarietyColumns' :data-source='selectVarietyDataSource' bordered
             :loading='selectVarietyLoading'
             :row-selection="{selectedRowKeys: selectedRowKeys,type: 'radio',onChange:onVarietySelectChange}"
             row-key='id'
             :pagination='varietyPagination'
             @change='varietyPaginationChange'
    ></a-table>
  </div>
</template>

<script>
  import { getFlowerVarietys } from '../../../api/api'

  export default {
    name: 'varietyModal',
    created(){
      this.searchFlowerVarietys();
    },
    data(){
      return {
        selectVarietyLoading: false,
        queryVarietyParams: {// 产品选择弹窗的查询
          variety: '',
          varietyCode: ''
        },
        selectVarietyColumns: [// 第二个弹窗的表头
          {
            title: '冷库',
            dataIndex: 'storehouse_dictText'
          },
          {
            title: '产品',
            dataIndex: 'variety'
          }, {
            title: '商品编码',
            dataIndex: 'varietyCode'
          }, {
            title: '规格',
            dataIndex: 'packingSpecifications'
          }, {
            title: '单位',
            dataIndex: 'flowerPoleLength'
          }
        ],
        selectVarietyDataSource: [],// 第二个弹窗中可选择的产品列表
        varietyPagination: {// 产品选择弹窗中表格的分页
          total: 0,
          current: 1,
          pageSize: 5,//每页中显示10条数据
          showSizeChanger: true,
          pageSizeOptions: ['5', '10', '15', '20'],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`  //分页中显示总的数据
        },
        selectionRows:[],
        selectedRowKeys: [],
      }
    },
    methods:{
      searchFlowerVarietys() {//根据条件查询产品选择弹窗中的产品列表
        let params = {
          pageNo: this.varietyPagination.current,
          pageSize: this.varietyPagination.pageSize,
          variety:this.queryVarietyParams.variety,
          varietyCode:this.queryVarietyParams.varietyCode
        }
        getFlowerVarietys(params).then(res => {
          if (res.success) {
            this.varietyPagination.total = res.result.total
            this.selectVarietyDataSource = res.result.records
            // 为selectVarietyDataSource中的每个对象加一个id，在第二个弹窗表格中的key使用
            let n = 1
            for (let item of this.selectVarietyDataSource) {
              item.id = n
              n += 1
            }
            this.selectVarietyLoading = false
          } else {
            this.selectVarietyLoading = false
            this.$message.error(res.message)
          }
        })
      },
      queryFlowerVarietys() {// 获取第二个弹窗中的产品列表
        let params = {
          pageNo: this.varietyPagination.current,
          pageSize: this.varietyPagination.pageSize
        }
        getFlowerVarietys(params).then(res => {
          if (res.success) {
            this.varietyPagination.total = res.result.total
            this.selectVarietyDataSource = res.result.records
            // 为selectVarietyDataSource中的每个对象加一个id，在第二个弹窗表格中的key使用
            let n = 1
            for (let item of this.selectVarietyDataSource) {
              item.id = n
              n += 1
            }
            this.selectVarietyLoading = false
          } else {
            this.$message.error(res.message)
          }
        })
      },
      onVarietySelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys// 如果不加这两行的话无法单选
        this.selectionRows = selectionRows
        this.selectVariety = selectionRows[0]
      },
      varietyPaginationChange(pagination) {
        this.varietyPagination.current = pagination.current
        this.varietyPagination.pageSize = pagination.pageSize
        this.queryFlowerVarietys()
      },
    }
  }
</script>

<style scoped>

</style>